<template>
  <div class="app-container">
    <el-form :inline="true" :mode="searchForm" class="demo-form-inline">
      <el-form-item label="作业标题">
        <el-input v-model="searchForm.searchTitle" placeholder="作业标题" />
      </el-form-item>
      <el-form-item label="班级">
        <ClassSelect v-model="searchForm.gradeId" :is-multiple="false" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchJob">查询</el-button>
        <el-button type="primary" @click="addJobVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="data.records"
      border
      fit
      highlight-current-row
      :header-cell-style="{
        background: '#f2f3f4',
        color: '#555',
        'font-weight': 'bold',
        'line-height': '32px',
      }"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column fixed label="序号" align="center" width="80">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="title" label="标题" align="center" />
      <el-table-column prop="realName" label="创建人" align="center" />
      <el-table-column prop="gradeName" label="所属班级" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="small"
            style="color: green; font-size: 14px"
            @click="showRow(row)"
            >查看</el-button
          >
          <el-button
            type="text"
            size="small"
            style="font-size: 14px"
            @click="updateRow(row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            style="color: red; font-size: 14px"
            @click="delJob(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="data.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="data.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <jobDialog
      v-model="addJobVisible"
      title="新增作业"
      :is-edit="true"
      :on-confirm="addJob"
      :edit-type="1"
    />
    <!-- v-model="addJobVisible"
      title="新增公告"
      :is-edit="true"
      :on-confirm="addJob"
      :edit-type="1" -->
    <jobDialog
      v-model="editVisible"
      title="编辑作业"
      :is-edit="true"
      :on-confirm="updateJob"
      :dialog-data="form"
    />
    <!-- <jobDialog
      v-model="editVisible"
      title="编辑公告"
      :is-edit="true"
      :on-confirm="updateJob"
      :dialog-data="form"
    />
    <jobDialog
      v-model="showVisible"
      title="查看公告"
      :is-edit="false"
      :dialog-data="form"
    /> -->
  </div>
</template>

<script>
import { JobPaging, JobAdd, JobDel, updateJob } from "@/api/job";
import jobDialog from "@/components/job/jobDialog/index";
import ClassSelect from "@/components/ClassSelect";
import { getTeacherJobPage } from "@/api/job";
export default {
  components: {
    jobDialog,
    ClassSelect,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      data: {},
      searchForm: {
        searchTitle: "",
        gradeId: null,
      },
      showVisible: false,
      addJobVisible: false,
      editVisible: false,
      form: {
        content: "",
        title: "",
        gradeIds: [],
      },
    };
  },
  created() {
    this.getJobPage();
  },
  methods: {
    // 分页查询
    async getJobPage(pageNum, pageSize, title = null, gradeId = null) {
      const params = {
        pageNum: pageNum,
        pageSize: pageSize,
        title: title,
        gradeId: gradeId,
      };
      const res = await getTeacherJobPage(params);
      this.data = res.data;
    },
    // 编辑公告按钮
    updateRow(row) {
      this.editVisible = true;
      this.form = row;
    },
    // 查看公告按钮
    showRow(row) {
      this.$router.push({ name: "userDetails", query: { row: row } });
    },
    formatDateToISOString(date) {
      // 确保输入是一个Date对象
      if (!(date instanceof Date)) {
        throw new TypeError("Expected a Date object");
      }

      // 格式化为ISO 8601格式，注意这里的时区会自动调整为UTC
      let isoString = date.toISOString();

      // 截取并重新组合字符串，去除毫秒部分并替换T为大写
      // 这一步是根据你的需求调整，通常ISO 8601格式包含毫秒且T是小写
      isoString = isoString.split(".")[0].replace("T", "T");

      return isoString;
    },
    // 新增公告
    addJob(JobForm) {
      console.log(JobForm);
      // 建立公告数据
      const data = {
        title: JobForm.title,
        content: JobForm.content,
        startTime: JobForm.time[0],
        endTime: JobForm.time[1],
        gradeId: JobForm.gradeId,
      };
      JobAdd(data).then((res) => {
        if (res.code) {
          // 刷新公告数据，关闭新增公告弹窗
          this.getJobPage(this.pageNum, this.pageSize);
          this.addJobVisible = false;
          this.$message({
            type: "success",
            message: "新增成功!",
          });
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },
    // 更新公告方法
    updateJob(JobForm) {
      const data = {
        id: this.form.id,
        title: JobForm.title,
        content: JobForm.content,
        startTime: JobForm.time[0],
        endTime: JobForm.time[1],
        gradeId: JobForm.gradeId,
      };
      updateJob(data).then((res) => {
        if (res.code) {
          this.getJobPage(this.pageNum, this.pageSize);
          this.editVisible = false;
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },
    // 搜索公告
    searchJob() {
      this.getJobPage(
        this.pageNum,
        this.pageSize,
        this.searchForm.searchTitle,
        this.searchForm.gradeId
      );
    },
    // 删除公告
    delJob(id) {
      this.$confirm("此操作将永久删除该公告, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          JobDel(id).then((res) => {
            if (res.code) {
              this.getJobPage(this.pageNum, this.pageSize);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch((error) => {
          // 明确捕获并检查reject的原因
          if (error === "cancel") {
            // 特别处理取消的情况，避免将其视为错误
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          } else {
            // 如果是其他错误，可以在这里处理
            console.error("发生了一个错误:", error);
          }
        });
    },

    handleSizeChange(val) {
      // 设置每页多少条逻辑
      this.pageSize = val;
      this.getJobPage(this.pageNum, val);
    },
    handleCurrentChange(val) {
      // 设置当前页逻辑
      this.pageNum = val;
      this.getJobPage(val, this.pageSize);
    },
  },
};
</script>

<style></style>
